<template>
  <transition enter-active-class="slideInUp faster animated" leave-active-class="slideOutDown faster animated">
    <div class="hbkdModule" v-if="isShowAni">
      <div class="hbkdBox publicVCenter">
        <img src="@/assets/image/hdBar/hbkdTitle.png" class="titleText" />
        <div class="note publicHvCenter">口袋内红包金额将用于红包雨等全场互动</div>
        <div class="entryWrap publicVCenter">
          <div class="rn">红包口袋余额：{{ remainMoney }}元</div>
          <div class="fb publicVCenter" v-tap="{methods: toFeedback}">
            <img src="@/assets/image/hdBar/kefu.png" class="kefuIcon" />
            反馈投诉
          </div>
        </div>
        <div class="rechargeList publicHCenter">
          <div
            class="rechargeItem publicHvCenter"
            v-for="(item, index) in hbkdRechargeListDisplay"
            :key="index"
            v-tap="{ methods: handleRechargeTap, rechargeObj: item }"
          >
            <div class="price publicVCenter" v-if="!item.isCustom">
              <label>￥</label>
              {{ item.price }}
            </div>
            <div class="price" v-if="item.isCustom && !inputVisible">土豪随意</div>
            <div class="iptWrap publicHvCenter" v-if="item.isCustom && inputVisible">
              <input type="number" maxlength="4" v-model="priceCustom" ref="rechargeInput" v-on:blur="handleBlur" />
              <div class="unit">元</div>
            </div>
            <div class="wish" v-if="(item.isCustom && !inputVisible) || !item.isCustom">{{ item.txt }}</div>
          </div>
        </div>
        <div class="agreement" v-tap="{ methods: toAgreement }">阅读并同意《充值服务协议》</div>
      </div>
    </div>
  </transition>
</template>
<script>
import { mapState, mapMutations } from 'vuex';

const wx = require('weixin-js-sdk');

const rechargeLocatInfo = [
  {
    price: 0,
    txt: '要发发发',
  },
  {
    price: 0,
    txt: '一生一世',
  },
  {
    price: 0,
    txt: '长长久久',
  },
  {
    price: 0,
    txt: '我爱你',
  },
  {
    price: 0,
    txt: '十全十美',
  },
  {
    price: 0,
    txt: '六六大顺',
  },
  {
    price: 0,
    txt: '一心一意',
  },
  {
    price: '',
    txt: '自定义金额',
  },
];
export default {
  name: 'hbkdPopup',
  computed: {
    ...mapState({
      money: (state) => state.user.money,
      hbkdRechargeList: (state) => state.live.hbkdRechargeList,
      remainMoney: (state) => state.live.remainMoney,
    }),
  },
  data() {
    return {
      isShowAni: false, // 控制recharge box弹出动画
      currentActiveMoney: '10',
      hbkdRechargeListDisplay: [],
      inputVisible: false,
      priceCustom: '',
    };
  },
  created() {
    const len = rechargeLocatInfo.length;
    const tmpRechargeList = this.hbkdRechargeList.split(',');
    for (let i = 0; i < len; i += 1) {
      if (tmpRechargeList[i]) {
        this.hbkdRechargeListDisplay.push({
          price: tmpRechargeList[i],
          txt: rechargeLocatInfo[i].txt,
          isCustom: i === 7,
        });
      }
    }
  },
  mounted() {
    // 执行弹出动画
    this.showAniStart();
    // console.log(this.giftList_format);
    // console.log(this.giftList);
    console.log('***充值列表展示***');
    console.log(this.hbkdRechargeList);
  },
  methods: {
    ...mapMutations({
      setOrigin: 'app/setOrigin',
    }),
    showAniStart() {
      this.isShowAni = true;
    },
    hideAniStart() {
      this.isShowAni = false;
    },
    handleRechargeTap(e) {
      //  console.log(e.rechargeObj);
      if (e.rechargeObj.isCustom) {
        this.inputVisible = true;
        this.$nextTick(() => {
          console.log(this.$refs.rechargeInput);
          this.$refs.rechargeInput[0].focus();
        });
      } else {
        this.inputVisible = false;
        this.pay(e.rechargeObj.price);
      }
    },
    handleBlur() {
      window.scrollTo(0, -document.documentElement.clientHeight);
      console.log(this.priceCustom);
      if (!this.priceCustom) {
        this.$toast.center('请输入或者选择充值金额!');
      }
      if (this.priceCustom === '0') {
        this.$toast.center('充值金额不能为0');
      }
      this.pay(this.priceCustom);
    },
    pay(price) {
      this.setOrigin('rechargeHbkd');
      // 跳转小程序支付
      wx.miniProgram.navigateTo({
        url: `/pages/pay/pay?openId=${this.$store.state.user.openId}&userId=${this.$store.state.user.userId}&total=${price}&origin=${this.$store.state.app.origin}`,
      });
    },
    toAgreement() {
      wx.miniProgram.navigateTo({
        url: '/pages/agreement/agreement',
      });
    },
    toFeedback() {
      wx.miniProgram.navigateTo({
        url: '/pages/feedback/feedback',
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import 'vue-swipe/dist/vue-swipe.css';

.hbkdModule {
  position: absolute;
  width: 100%;
  bottom: 0;
  .hbkdBox {
    width: 750px;
    height: 650px;
    background-color: #170d41;
    flex-direction: column;
    .titleText {
      width: 343px;
      height: 72px;
      position: relative;
    }
    .note {
      width: 570px;
      height: 64px;
      background: #4e4584;
      border-radius: 32px;
      font-size: 24px;
      color: #c2baf5;
      margin-top: 32px;
    }
    .entryWrap {
      justify-content: space-between;
      margin-top: 24px;
      width: 100%;
      padding: 0 32px;
      .rn {
        font-size: 24px;
        color: #ffffff;
        font-weight: 500;
      }
      .fb {
        font-size: 20px;
        font-weight: 400;
        color: #ffffff;
        margin-left: 8px;
        .kefuIcon {
          width: 20px;
          height: 20px;
          margin-right: 8px;
        }
      }
    }
    .rechargeList {
      flex-wrap: wrap;
      margin-top: 24px;
      .rechargeItem {
        width: 148px;
        height: 100px;
        background: #262640;
        border-radius: 8px;
        box-shadow: 0px 2px 4px 0px rgba(18, 19, 40, 0.25);
        flex-direction: column;
        margin-right: 16px;
        margin-bottom: 16px;
        .price {
          font-size: 28px;
          color: #a7a5f0;
          font-weight: 500;
          label {
            font-size: 24px;
            margin-right: 2px;
            font-weight: 400;
          }
        }
        .iptWrap {
          width: 90%;
          input {
            width: 80%;
            outline: none;
            border: none;
            background-color: transparent;
            color: #fff;
            font-size: 28px;
            text-align: center;
          }
          .unit {
            font-size: 21px;
            color: #a7a5f0;
          }
        }
        .wish {
          color: #8d8bb0;
          font-size: 20px;
          font-weight: 400;
          margin-top: 2px;
        }
        &:nth-child(4n) {
          margin-right: 0;
        }
      }
    }
    .agreement {
      font-size: 20px;
      font-weight: 400;
      color: #fffeff;
      margin: 24px auto;
    }
  }
}
</style>
